<template>
  <div class="fx">
    <a-alert>
      <template #icon>
        <icon-exclamation-circle />
      </template>
      OTA渠道订单同步信息，会通过短信通知配置的员工
    </a-alert>
    <a-button type="primary" @click="handleAdd">批量新增通知人</a-button>
  </div>
  <inform-module :form="form" :id="id" @submitBtn="submitBtn" />
  <div class="dnd-rule">
    <div class="title">
      <h2>免打扰规则</h2>
      <a-switch :checked-value="1" :unchecked-value="0" v-model="form.doNotDisturbRule" />
    </div>
    <div class="rule-date" v-if="form.doNotDisturbRule">
      <p>从</p>
      <a-time-picker v-model="form.doNotDisturbStartTime" format="HH:mm" :defaultValue="'20:00'" style="width: 130px" />
      <span style="margin: 0 15px">至</span>
      <a-time-picker v-model="form.doNotDisturbEndTime" format="HH:mm" :defaultValue="'08:00'" style="width: 130px" />
      <p class="tip">不发送通知</p>
    </div>
  </div>
  <add-inform-newModal ref="newInformModelRef" @getNoticePerson="getNoticePerson" />
</template>

<script setup name="OrderSyncForm">
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import addInformNewModal from '../components/inform-model-new-modal.vue'
  import { useRouter } from 'vue-router'
  import { getNoticeDetail, saveNotice } from '@/api/business/orderSync'
  import informModule from '../components/inform-module.vue'

  const router = useRouter()
  const form = ref({
    doNotDisturbRule: 1,
  })
  // 添加通知人
  const newInformModelRef = ref()
  // 打开弹窗
  const handleAdd = () => {
    newInformModelRef.value.open()
  }
  // 获取编辑数据
  const getNoticePerson = () => {
    getNoticeDetail().then(({ result }) => {
      form.value = result
    })
  }
  // 提交
  const submitBtn = (val) => {
    form.value.staffList = val
    saveNotice(form.value).then((res) => {
      if (res.code == 200) {
        Message.success(res.message)
        router.push('/business/channel/order-sync')
      }
    })
  }
  // 获取通知人详情
  onMounted(() => {
    getNoticePerson()
  })
</script>
<style lang="less" scoped>
  .fx {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    :first-child {
      margin-right: 32px;
    }
  }
  .dnd-rule {
    .title {
      display: flex;
      h2 {
        font-weight: 500;
        color: #1d2129;
        line-height: 24px;
        font-size: 16px;
        margin-right: 24px;
      }
    }
    .rule-date {
      margin-top: 20px;
      display: flex;
      align-items: center;
      width: 40%;
      p {
        margin: 0 10px;
      }
      .tip {
        min-width: 100px;
      }
    }
  }
</style>
